---
import { getCollection } from "astro:content";
import BaseLayout from "@layouts/BaseLayout.astro";
import PostCard from "@components/CommonCard.astro";
import Pagination from "@components/Pagination.astro";
import { getCategoryMetadata } from "@consts";

export async function getStaticPaths() {
  const allPosts = await getCollection("posts");
  const uniqueCategory = [
    ...new Set(allPosts.map((post) => post.data.category).flat()),
  ];

  return uniqueCategory.flatMap((category) => {
    const filteredPosts = allPosts.filter((post) =>
      post.data.category.includes(category),
    );
    filteredPosts.sort(
      (a, b) =>
        new Date(b.data.pubDate).valueOf() - new Date(a.data.pubDate).valueOf(),
    );

    const pageSize = 12;
    const totalPages = Math.ceil(filteredPosts.length / pageSize);

    return Array.from({ length: totalPages }, (_, index) => ({
      params: { category, page: (index + 1).toString() },
      props: {
        page: {
          data: filteredPosts.slice(index * pageSize, (index + 1) * pageSize),
          currentPage: index + 1,
          lastPage: totalPages,
        },
      },
    }));
  });
}

const params = Astro.params;
const { page } = Astro.props;
const { title, description } = getCategoryMetadata(params.category);
---

<BaseLayout title={title} description={description}>
  <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
    {page.data.map((post) => <PostCard post={post} />)}
  </div>

  <Pagination
    currentPage={page.currentPage}
    lastPage={page.lastPage}
    urlPrev={page.currentPage > 1
      ? `/category/${params.category}/${page.currentPage - 1}`
      : null}
    urlNext={page.currentPage < page.lastPage
      ? `/category/${params.category}/${page.currentPage + 1}`
      : null}
    basePath={`/category/${params.category}`}
    maxDisplayedPages={5}
  />
</BaseLayout>
